<template>
  <view>
  <view>
    <view class="input">
        <u-button type="success" icon="plus" text="新增" style="width: 200rpx;"
                  @click="showDrawer2('showRight')"></u-button>
      </view>
    </view>
  <uni-drawer ref="showRight" mode="right" :width="320">
    <view class="close">
      <button @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></button>
      <view class="formlist">
        <u-form :model="fromAdd" ref="uForm" label-width="80" labelAlign="left">
          <u-form-item prop="seller" borderBottom ref="item1">
            <view class="lable">付款金额</view>
            <u--input v-model="fromAdd.payamount" border="none" placeholder="请填写付款金额"></u--input>
          </u-form-item>
          <u-form-item prop="model" borderBottom ref="item1">
            <view class="lable">付款方式</view>
            <u--input v-model="fromAdd.paymethod" border="none" placeholder="请填写付款方式"></u--input>
          </u-form-item>
          <view class="uni-btn-v" @click="submitadd()">确认新增</view>
        </u-form>
      </view>
    </view>
  </uni-drawer>
    <uni-drawer ref="showLeft" mode="left" :width="320">
      <view class="close">
        <button @click="closeDrawer('showLeft')"><text class="word-btn-white">关闭</text></button>
        <view class="formlist">
          <u-form :model="fromupdate" ref="uForm" label-width="80" labelAlign="left">
            <u-form-item prop="model" borderBottom ref="item1">
              <view class="lable">付款金额</view>
              <u--input v-model="fromupdate.payamount" border="none" placeholder="请填写付款金额"></u--input>
            </u-form-item>
            <u-form-item prop="number" borderBottom ref="item1">
              <view class="lable">付款方式</view>
<!--              <button class="but" @click="qiehuan" type="primary">切换</button>-->
              <u--input v-model="fromupdate.paymethod" border="none" placeholder="请填写付款方式"></u--input>
<!--              <u&#45;&#45;input v-if="buttonState === 'tianxie'" v-model="fromupdate.paymethod" border="none" placeholder="请填写付款方式"></u&#45;&#45;input>-->
<!--              <view v-if="buttonState === 'xuanze'" class="lable2">-->
<!--                            <uni-data-select-->
<!--                                v-model="value2"-->
<!--                                :localdata="inseerlist2"-->
<!--                                @change="change2"-->
<!--                            ></uni-data-select>-->
<!--              </view>-->
            </u-form-item>
            <view class="uni-btn-v" @click="submit">确认修改</view>
          </u-form>
        </view>
      </view>
    </uni-drawer>
    <view class="uni-container">

      <uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
        <uni-tr>
          <uni-th width="150" align="center">付款日期</uni-th>
          <uni-th width="60" align="center">付款金额</uni-th>
          <uni-th width="60" align="center">付款方式</uni-th>

          <uni-th width="150" align="center">设置</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in tableData" :key="index">
          <uni-td align="center">{{ item.paytime }}</uni-td>
          <uni-td align="center">
            <view class="name">{{ item.payamount }}</view>
          </uni-td>
          <uni-td align="center">{{ item.paymethod }}</uni-td>

          <uni-td>
            <view class="uni-group">
              <button class="uni-button" @click="showDrawer(item,'showLeft')" size="mini" type="primary">修改</button>
              <button class="uni-button" @click="deleteOne(item)" size="mini" type="warn">删除</button>
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>

      <view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent"
                                                       :total="total" @change="change" /></view>
    </view>
    <!--    <button class="uni-btn-v" style="margin-top:45%" @click="insertall">保存</button>-->
  </view>
</template>


<script>
import {
} from '@/common/api.js'
// import insert from "./insert.vue";
import {payinfor, Payinforadd,  Payinfordelete, Payinforupdate} from "../../common/api";
export default {
  // computed: {
  //   insert() {
  //     return insert
  //   }
  // },
  data() {
    return {
      // showForm: true,
      buttonState: 'xuanze',
      value2: 1,
      inseerlist2:[{
        value: 0,
        text: '银行卡'
      },{
        value: 1,
        text: '微信'
      },{
        value: 2,
        text: '支付宝'
      }],
      traner: '',
      orstate: '',
      value: '',
      //抽屉
      showLeft: false,
      showRight: false,
      searchVal: '',
      itemlist:[],
      fromAdd: {
        payamount: "", //金额
        paymethod: "", //是否支付
        other: "", //是否支付
        otherid: "", //是否支付
        orstate: "", //是否支付
      },
      fromupdate: {},
      tableData: [],
      // 每页数据量
      pageSize: 10,
      // 当前页
      pageCurrent: 1,
      // 数据总量
      total: 0,
      loading: false
    }
  },
  onLoad(i) {
    console.log(i);
    this.orstate = i.orstate;
    this.traner = i.traner;
    this.getData();
  },
  methods: {
    qiehuan(){
      if (this.buttonState == 'xuanze'){
        this.buttonState = 'tianxie'
      }else{
        this.buttonState = 'xuanze'
      }
    },
    getData() {
      let from = {}
      from.companyId = uni.getStorageSync('companyId');
      from.orstate = this.orstate;//1为进货详情2为销货详情
      from.traner = this.traner;
      uni.showLoading({
        title: '加载中...',
      });
      payinfor(from).then((res) => {
        uni.hideLoading();
        this.tableData = res.data
        // this.getData()
      })
    },
    submit() {
      uni.showLoading({
        title: '加载中...',
      });
      // this.fromupdate.companyId = uni.getStorageSync('companyId');
      Payinforupdate(this.fromupdate).then((res) => {
        uni.hideLoading();
        this.getData()
      })
    },
    submitadd() {
      this.fromAdd.orstate = this.orstate;
      this.fromAdd.other = this.traner;
      this.fromAdd.otherid = uni.getStorageSync('companyId');
      uni.showLoading({
        title: '加载中...',
      });
      Payinforadd(this.fromAdd).then((res) => {
        uni.hideLoading();
        this.getData()
      })
    },
    deleteOne(item){
      console.log('删除');
      console.log(item);
      this.itemlist[0] = item.id;
      let from = {}
      from.idList = this.itemlist;
      uni.showLoading({
        title: '加载中...',
      });
      Payinfordelete(from).then((res) => {
        uni.hideLoading();
        this.getData()
      })
    },
    showDrawer(item,e) {
      this.$refs[e].open()
      this.fromupdate = item;
    },
    showDrawer2(e) {
      this.$refs[e].open()
    },
    change2(e) {
      console.log("e2:", e);
      if (e == 0){
        this.paymentMethod = '银行卡'
      }else if (e == 1){
        this.paymentMethod = '微信'
      }else if (e == 2){
        this.paymentMethod = '支付宝'
      }
    },
    // 关闭窗口
    closeDrawer(e) {
      this.$refs[e].close()
    },
    // // 抽屉状态发生变化触发
    // change(e, type) {
    //   console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
    //   this[type] = e
    // },
    // //输入搜索内容
    // change(e) {
    //   console.log('change', e);
    // },
    // 分页触发
    change(e) {
      this.$refs.table.clearSelection()
      this.selectedIndexs.length = 0
      this.getData(e.current)
    },

  },
  onNavigationBarButtonTap(e) {
    if (this.showLeft) {
      this.$refs.showLeft.close()
    } else {
      this.$refs.showLeft.open()
    }
  },
  // app端拦截返回事件 ，仅app端生效
  onBackPress() {
    if (this.showRight || this.showLeft) {
      this.$refs.showLeft.close()
      this.$refs.showRight.close()
      return true
    }
  }
}
</script>


<style>
/* #ifndef H5 */
/* page {
padding-top: 85px;
} */
/* #endif */
.uni-group {
  display: flex;
  align-items: center;
}

.input {
  padding: 30rpx;
}

.formlist {
  /* margin: 420rpx 30rpx 0 30rpx; */
  /* background-color: white; */
  padding: 30rpx;
  border-radius: 30rpx;
}

.lable {
  font-size: 30rpx;
  font-weight: bold;
}

.uni-btn-v {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #24d4b0;
  color: #fff;
  font-size: 35rpx;
  font-weight: bold;
  border-radius: 30rpx;
  text-align: center;
  margin-top: 30rpx;
}
</style>
